<template>
    <!--<div id="nationSeaerch"  ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">-->
    <div id="nationSeaerch" onselectstart="return false;">
        <div class="s-panel" @click="getFromSession()">
            <div id="selector" @click="scontroler.show = !scontroler.show">
                <span class="soptioner">
                    {{ scontroler.choose }}
                </span>
            </div>
            <input type="text" id="searchKey" v-model="keyword" maxlength="15" :placeholder="scontroler.des[scontroler.index]" @click="showHistory" v-bind:class="{searchKeyBorder : keyword !== ''}">
            <span class="wordsClear" id="searchReset" v-show="keyword !== ''"  @click="sentToFather(true);clearKeyword()">×</span>
            <button class="searchIcon sicon" @click="doSearch()" :disabled="isDisabled">&#xe691;</button>
        </div>
        <ul class="sdropList sselect" v-show="scontroler.show">
            <li v-for="(item,index) in scontroler.data" @click="scontroler.choose = item; scontroler.show = false;scontroler.index = index">
                {{ item }}
            </li>
        </ul>
        <div id="sdrop" v-show="shistory.show || searchData.show">
            <!--历史记录-->
            <ul class="sdropList sresult" v-show="shistory.show">
                    <li v-for="item in shistory.data" @click="chooseResult(item)">
                        <span class="hisIcon sicon">&#xe670;</span>{{ item.name}}
                    </li>
                    <p class="clearFavorite"><span id="clearHistory" @click="clearHistory(), shistory.show = false">清空历史</span></p>
            </ul>
            <ul class="sdropList sresult" v-show="searchData.show">
                <!--匹配结果-->
                    <li v-for="item in searchData.result" @click="chooseResult(item)">
                        <span class="sresult-l" v-html="item.name"></span> <span class="sresult-r" v-html="(item.py?item.py + '/':'') + item.code"></span>
                    </li>
            </ul>
        </div>

        <!--查询结果-->
        <div id="result-box" v-if="flyList.show">
            <div class="result-box-head">
                <p>
                    {{searchData.choose.name}} {{ searchData.choose.code }}
                    <span class="sicon fadvanced-filter-turn" title="高级筛选" @click="advfilterControl.show=!advfilterControl.show" v-show="!advfilterControl.show">&#xe6d2;</span>
                    <span id="showFlyList" @click="flyList.lshow = !flyList.lshow">
                        查看航线列表
                        <span v-show="!flyList.lshow" class="sicon small">&#xe88e;</span>
                        <span v-show="flyList.lshow" class="sicon small">&#xe61f;</span>
                    </span>
                </p>
            </div>
            <!--航线结果-->
            <div v-show="flyList.lshow" class="resule-fly">
                <table id="resule-flyList" cellspacing="0" cellpadding="0">
                    <thead>
                        <tr>
                            <td style="width: 100px;">航班</td>
                            <td style="width: 220px;">航线</td>
                            <td style="width: 100px;">机型</td>
                        </tr>
                    </thead>
                    <tbody v-if="!advfilterControl.active">
                    <tr v-for="item in flyList.data">
                        <td>{{item.flyNbr}}</td>
                        <td>{{item.dpt_AirPt_Cd + '-' + item.arrv_Airpt_Cd}}</td>
                        <td>{{item.jixing}}</td>
                    </tr>
                    </tbody>
                    <tbody v-if="advfilterControl.active">
                    <tr v-for="item in flyList.ndata">
                        <td>{{item.flyNbr}}</td>
                        <td>{{item.dpt_AirPt_Cd + '-' + item.arrv_Airpt_Cd}}</td>
                        <td>{{item.jixing}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div v-show="flyList.lshow" class="result-box-foot">
                <p id="table-outer" @click="outTalbe()"><span class="sicon">&#xe645;</span>导出表格</p>
            </div>
        </div>
        <!--<adfilter v-show="flyList.show && advfilterControl.show"></adfilter>-->
        <adfilter v-if="flyList.show && advfilterControl.show" v-on:sendData="getDataFromFilter" v-on:stateControl="filterChange"></adfilter>
    </div>
</template>

<script>
    import bus from './eventBus';   //搜索中间件  to：majorMap
    import adfilter from './advFilter.vue';
    export default{
        data(){
            return {
                keyword: '',
                currentUser: '',
                isDisabled:false,
                scontroler: {
                    show: false,
                    data: ['All','航司','机场'],
                    choose: 'All',
                    index: 0,
                    des: ['输入航司、机场进行查询','支持二字码、中文','支持三字码、首字母、拼音、中文']
                },
                shistory: {
                    show: false,
                    data: []
                },
                searchSource: {
                    airport: '',
                    hangsi: ''
                },
                searchData: {
                    show: false,
                    result: [],
                    choose: []  // changed by li click
                },
                flyList: {
                    show: false,
                    lshow: false,
                    data: [],
                    ndata:[]
                },
                mapLines: {
                    show: false,
                    data: [],
                    newLines: [],
                },
                mapDom: {
                    exist: false,
                    chart: '',
                    oldSeries: '',
                    newSeries: [],
                    changed: false
                },
                advfilterControl: {
                    show: false,
                    active: false
                }
            }
        },
        components:{'adfilter':adfilter},
        methods:{
            getFromSession(){
                let _this = this;
                if(_this.searchSource.airport === ''){
                    _this.searchSource.airport=JSON.parse(sessionStorage.getItem('airportData'));
                    _this.searchSource.hangsi=JSON.parse(sessionStorage.getItem('department'));
                }
            },
            changeKeyword(){
                let _this = this;
                _this.flyList.show = false;
                _this.searchData.result = [];
                const word = _this.keyword.replace(/\s+/g,'').toLowerCase();
                const wordlen = word.length;
                _this.shistory.show = false;
                if(wordlen === 0){
                    _this.searchData.show = false;
                    return;
                }else if(wordlen > 20){
                    alert("请规范输入！");
                    _this.clearKeyword();
                    return;
                }
                if(_this.scontroler.choose === 'All'){
                    _this.findAirport(word, wordlen);
                    _this.findHangsi(word, wordlen);
                }else if(_this.scontroler.choose === '航司'){
                    _this.findHangsi(word, wordlen);
                }else{
                    _this.findAirport(word, wordlen);
                }
                _this.searchData.choose = _this.searchData.result.length>0 ? _this.searchData.choose : null;
                _this.searchData.show = _this.searchData.result.length>0 ? true : false;
            },
            setHistory(){ //-------------------------set
                let _this = this;
                let hsource = _this.shistory.data;
                let cur = _this.searchData.choose;
                for(let item in hsource){
                    if(cur.code == hsource[item].code) {
                        hsource.splice(item,1);
                    }
                }
                hsource.unshift(cur);   //    入栈操作
                if(hsource.length > 8){ //最多8个
                    hsource.length = 8;
                }
                localStorage.setItem("searchHistory" + this.currentUser, JSON.stringify(hsource));
            },
            getHistory(){ //-------------------------get
                this.shistory.data = localStorage.getItem("searchHistory"+ this.currentUser) ? JSON.parse(localStorage.getItem("searchHistory" + this.currentUser)) : [];
            },
            clearHistory(){   //-------------------------clear
                this.shistory.data = [];
                localStorage.removeItem('searchHistory'+ this.currentUser);
            },
            findCurrentUser(){
                let name = '';
                if(sessionStorage.getItem("groupName")){
                    name = sessionStorage.getItem("groupName");
                }else{
                    name = JSON.parse(sessionStorage.getItem("linesData")).success.airportName;
                }
                this.currentUser = name ;
            },
            findAirport(word, wordlen){
                let _this = this;
                let result = _this.searchData.result;
                let allres = [[],[],[],[]];
                $.each(_this.searchSource.airport, (key, val)=>{
                    val.forEach((vval,index)=>{
                        let strength = 4 ;
                        let rpy = vval.py, rcode = vval.code, rname = vval.airportName, rpinyin = vval.pinyin;
                        if(vval.py.toLowerCase().indexOf(word)> -1 ){
                            let len = vval.py.toLowerCase().indexOf(word);
                            rpy = vval.py.substr(0,len) + '<span style="color: #4455A1;font-weight: bold">' + vval.py.substr(len,wordlen) + '</span>' + vval.py.substr(len+ wordlen);
                            strength --;
                        }
                        if(vval.code.toLowerCase().indexOf(word)> -1 ){
                            let len = vval.code.toLowerCase().indexOf(word);
                            rcode = vval.code.substr(0,len) + '<span style="color: #4455A1;font-weight: bold">' + vval.code.substr(len,wordlen) + '</span>' + vval.code.substr(len+ wordlen);
                            strength --;
                        }
                        if(vval.airportName.indexOf(word)> -1 ){
                            let len = vval.airportName.toLowerCase().indexOf(word);
                            rname = vval.airportName.substr(0,len) + '<span style="color: #4455A1;font-weight: bold">' + vval.airportName.substr(len,wordlen) + '</span>' + vval.airportName.substr(len+ wordlen);
                            strength --;
                        }
                        if(vval.pinyin.toLowerCase().indexOf(word)> -1 ){
                            //全拼只是拿来增加强度
                            strength --;
                            if(vval.pinyin.toLowerCase().indexOf(word) == 0){   //如果匹配到为拼音首字母则优先显示
                                strength --;
                            }
                        }
                        if(strength === 4 ){
                            return false;
                        }else{  //根据强度strength放入同组
                            strength = strength > -1 ? strength : 0;
                            allres[strength].push({
                                name: rname,
                                code: rcode,
                                py: rpy
                            })
                        }
                    })
                })
                _this.searchData.result = allres[0].concat(allres[1]).concat(allres[2]).concat(allres[3]);
                if(_this.searchData.result.length > 20){   //默认显示前20个机场
                    _this.searchData.result.length = 20 ;
                }
                allres = null;
            },
            findHangsi(word, wordlen){
                let _this = this;
                $.each(_this.searchSource.hangsi, (key, val)=>{
                    if(val.name.toLowerCase().indexOf(word)> -1 ){
                        val.iT = val.iT.replace(/\s+/g,'');
                        let len = val.name.toLowerCase().indexOf(word);
                        _this.searchData.result.push({
                            oname: val.name,
                            name: val.name.substr(0,len) + '<span style="color: #4455A1;font-weight: bold">' + val.name.substr(len,wordlen) + '</span>' + val.name.substr(len+ wordlen),
                            code: val.iT,
                            py: ''
                        });
                        return;
                    }
                    if(val.iT.toLowerCase().indexOf(word)> -1 ){
                        val.iT = val.iT.replace(/\s+/g,'');
                        let len = val.iT.toLowerCase().indexOf(word);
                        _this.searchData.result.push({
                            oname: val.name,
                            name: val.name,
                            code: val.iT.substr(0,len) + '<span style="color: #4455A1;font-weight: bold">' + val.iT.substr(len,wordlen) + '</span>' + val.iT.substr(len+ wordlen),
                            py: ''
                        });
                        return;
                    }
                })
            },
            showHistory(){
                let _this = this;
                if(_this.shistory.data.length > 0 && _this.keyword == '' && _this.scontroler.choose ==='All'){
                    _this.shistory.show = true;
                }
            },
            chooseResult(val){
                let _this = this;
                _this.keyword = val.name.replace(/<[^>]+>/g,"");
                _this.searchData.choose = {
                    name: val.name.replace(/<[^>]+>/g,""),
                    code: val.code.replace(/<[^>]+>/g,"")
                };
            },
            doSearch: function () {
                let _this = this;
                _this.isDisabled = true;
                setTimeout(() => {
                    _this.isDisabled = false;
                },3000);
                _this.flyList.data = [];
                if (_this.keyword == '') {
                    if (_this.mapDom.changed) {
                        _this.sentToFather(true);
                    }
                    return false;
                }
                if (_this.searchData.choose === null || JSON.stringify(_this.searchData.choose) == '[]') {
                    alert('暂无信息，请输入正确内容或者从列表中选择！');
                    $('#searchReset').click();
                    return false;
                }
                let pAirport = '', pHangsi = '';
                if (_this.searchData.choose.code.length == 2) {
                    pHangsi = _this.searchData.choose.code;
                } else {
                    pAirport = _this.searchData.choose.code;
                }

                $.ajax({
                    url: '/restful/getAllAirLineData',
                    type: 'get',
                    dataType: 'JSON',
                    async: false,
                    data: {
                        airport: pAirport,
                        hangSi: pHangsi
                    }
            })
            .done(function (res) {
                    if (res.list.length > 0) {
                        _this.advfilterControl.active = false;
                        _this.checkMap();
                        _this.flyList.data = res.list;
                        _this.flyList.show = true;
                        _this.setHistory();
                        _this.clearRepeat();
                    }
                })
                    .fail(function () {
                        console.log("error: doSearch()");
                    })
            },
            clearRepeat(){
                let _this = this,
                    olist = _this.advfilterControl.active ? _this.flyList.ndata:_this.flyList.data; //原始数据，对象型数组
                if(olist.length < 1){
                    _this.advfilterControl.active = false;
                    return alert("无匹配机场，请切换筛选条件。");
                }

                let aresult = [olist[0].dpt_AirPt_Cd + '-' +  olist[0].arrv_Airpt_Cd],
                    oresult = [];
                for(let item of olist){     //提取对象中的信息，以-间隔，生成字符串数组
                    oresult.push(item.dpt_AirPt_Cd + '-' + item.arrv_Airpt_Cd);
                }
                for(let item of oresult){   //元素去重
                    if(aresult.indexOf(item)<0 ) aresult.push(item);
                }
                for(let item of aresult){   //往返去重
                    let key = item.split('-')[1] + '-' +item.split('-')[0];
                    for(let i = aresult.length-1; i>=0 ; i--){
                        if(aresult[i] == key) {
                            aresult.splice(i,1);
                        }
                    }
                }
                _this.mapLines.data = aresult.map(function (val) {      //转换
                    return {
                        from: val.split('-')[0],
                        to: val.split('-')[1]
                    };
                })
                oresult.length = 0;
                aresult.length = 0;
                _this.drawLines();
            },
            drawLines(){    //获取全国航线数据
                let _this = this;
                let allLines = JSON.parse(localStorage.getItem('ChinaAllLinesOptionaa'));
                if(allLines!==null && allLines!==''){
                    _this.getCoordFromChina(allLines);
                    return ;
                }
                $.ajax({
                    type:'GET',
                    url : '/restful/getChinaAirLineData',
                    dataType:'jsonp',
                    success:(data)=>{
                        _this.getCoordFromChina(data.success.chinaAriLineDataList);
                        localStorage.setItem('ChinaAllLinesOptionaa', JSON.stringify(data.success.chinaAriLineDataList));
                    },
                    error: (err)=>{
                        console.log(err);
                    }
                });
            },
            getCoordFromChina(data){    //获取对应城市坐标
                let _this = this, lines = [],
                dotSeries = {
                    name: '城市点位',
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        },
                    },
                    data: [],
                };
                let curCityList = [],storeCity,_flag=true;
                let filterData = _this.mapLines.data;
                for(let item of data){
                    for(let sub of filterData){
                        if(item.fromName ==sub.from && item.toName == sub.to){
//                        if(item.fromName.indexOf(sub.from)>-1 &&item.toName.indexOf(sub.to)>-1){
                            if(_flag){
                                storeCity = item;
                            }
                            _flag = false;
                            lines.push({
                                fromName: item.fromName,
                                toName: item.toName,
                                coords: [item.coords.fromName, item.coords.toName]
                            });
                            if(curCityList.indexOf(item.toName)===-1){
                                curCityList.push(item.toName);
                                dotSeries.data.push({
                                    name: item.toName,
                                    value: item.coords.toName.concat(1)
                                })
                            }
                            if(curCityList.indexOf(item.fromName)===-1){
                                curCityList.push(item.fromName);
                                dotSeries.data.push({
                                    name: item.fromName,
                                    value: item.coords.fromName.concat(1)
                                })
                            }
                        }
                    }
                }
                return _this.sentToFather(false, lines, dotSeries);
            },
            sentToFather(type, line, dot) {
                //true为重置，false为更改
                if(this.flyList.data.length == 0 && !this.mapDom.changed){  //无查询结果且map未改变，不进行改变
                    return;
                }
                //在原环境下
                if(this.mapDom.exist){
                    let portName = window.mapDom.name;
                    let obj = this.mapDom;
                    let mapOption = null;
                    mapOption = JSON.parse(localStorage.getItem("pChinaAllLinesOption" + portName));
                    if(type === true){
                        this.advfilterControl.active = false;
                        this.advfilterControl.show = false;
                        window.mapDom.setOption(mapOption,true);
                        obj.changed = false;
                        console.log('reset ChinaMap');
                    }else{
                        let series = mapOption.series[2];
                        series.name = '搜索航线';
                        series.data = line;
                        series.lineStyle.normal.width = 2.4;
                        series.lineStyle.emphasis.width = 4;
                        series.tooltip = {
                            show : true,
                            formatter: (p)=>{
                                return p.data.fromName + '-' + p.data.toName;
                            }
                        };
                        mapOption.series = [series, dot];
                        window.mapDom.setOption(mapOption,true);
                        obj.changed = true;
                    }
                    return;
                }
                //在VUE环境下
                if(type){
                    this.advfilterControl.active = false;
                    this.advfilterControl.show = false;
                    bus.$emit("changeMap", type);
                    this.mapDom.changed = false;
                }else{
                    bus.$emit("changeMap", {line, dot});
                    this.mapDom.changed = true;
                }
                return;
            },
            clearKeyword(){
                let _this = this;
                _this.keyword = '';
                _this.shistory.show = true;
                _this.searchData.show = false;
                _this.searchData.choose = [];
                _this.flyList.show = false;
                _this.flyList.lshow = false;
                _this.flyList.data = [];
                $('#searchKey').focus();
            },
            outTalbe(){
                var idTmr;
                function  getExplorer() {
                    var explorer = window.navigator.userAgent ;
                    //ie
                    if (explorer.indexOf("MSIE") >= 0) {
                        return 'ie';
                    }
                    //firefox
                    else if (explorer.indexOf("Firefox") >= 0) {
                        return 'Firefox';
                    }
                    //Chrome
                    else if(explorer.indexOf("Chrome") >= 0){
                        return 'Chrome';
                    }
                    //Opera
                    else if(explorer.indexOf("Opera") >= 0){
                        return 'Opera';
                    }
                    //Safari
                    else if(explorer.indexOf("Safari") >= 0){
                        return 'Safari';
                    }
                }
                function method1(tableid) {//整个表格拷贝到EXCEL中
                    if(getExplorer()=='ie')
                    {
                        var curTbl = document.getElementById(tableid);
                        var oXL = new ActiveXObject("Excel.Application");
                        //创建AX对象excel
                        var oWB = oXL.Workbooks.Add();
                        //获取workbook对象 6y77+
                        var xlsheet = oWB.Worksheets(1);
                        //激活当前sheet
                        var sel = document.body.createTextRange();
                        sel.moveToElementText(curTbl);
                        //把表格中的内容移到TextRange中
                        sel.select;
                        //全选TextRange中内容
                        sel.execCommand("Copy");
                        //复制TextRange中内容
                        xlsheet.Paste();
                        //粘贴到活动的EXCEL中
                        oXL.Visible = true;
                        //设置excel可见属性
                        try {
                            var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                        } catch (e) {
                            print("Nested catch caught " + e);
                        } finally {
                            oWB.SaveAs(fname);
                            oWB.Close(savechanges = false);
                            //xls.visible = false;
                            oXL.Quit();
                            oXL = null;
                            //结束excel进程，退出完成
                            //window.setInterval("Cleanup();",1);
                            idTmr = window.setInterval("Cleanup();", 1);
                        }
                    } else {
                        tableToExcel(tableid);
                    }
                }
                function Cleanup() {
                    window.clearInterval(idTmr);
                    CollectGarbage();
                }
                var tableToExcel = (function() {
                    var uri = 'data:application/vnd.ms-excel;base64,',
                        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
                        base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
                        format = function(s, c) {
                            return s.replace(/{(\w+)}/g,
                                function(m, p) { return c[p]; }) }
                    return function(table, name) {
                        if (!table.nodeType) table = document.getElementById(table);
                        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
                        //window.location.href = uri + base64(format(template, ctx));
                        window.open(uri + base64(format(template, ctx)));
                        setTimeout(function () {
                            console.clear();
                        },3000)
                    }
                })()
                method1('resule-flyList');
            },
            checkMap(){
                if(!!window.mapDom){
                    this.mapDom.exist = true;
                    this.mapDom.oldSeries = JSON.stringify(window.mapDom.getOption().series); //全国航线series
                }
            },
            getDataFromFilter(data,it) {
                let that = this,d=that.flyList.data,searPort = that.searchData.choose.code.toUpperCase();
                that.flyList.ndata = [];
                let ll = [];
                that.advfilterControl.active = true;
                d.map((item)=>{
                    if(it.indexOf(item.arrv_Itia)> -1 && it[it.indexOf(item.arrv_Itia)]!==searPort){
                        if(ll.indexOf(item.arrv_Itia)=== -1){
                            ll.push(item.arrv_Itia);
                            that.flyList.ndata.push(item);
                        }
                    }
                })
                that.clearRepeat();
            },
            resetFilter(){
                debugger
                this.advfilterControl.active = false;
                return this.clearRepeat();
            },
            filterChange(val){
                if(this.advfilterControl.active){//如已改动，则还原map
                    this.advfilterControl.active = false;
                    this.advfilterControl.show = false;
                    return this.clearRepeat();
                }
                this.advfilterControl.active = false;
                this.advfilterControl.show = false;
            }
        },
        mounted(){
            $('#nested').css({
                'background-color': 'rgba(0,0,0,0)',
                'position': 'fixed',
                'top': '50px',
                'left': '60px',
                'width': '500px',
                'height': '80px',
            });
            $('#set_clear').hide();
            let _this = this;
            _this.findCurrentUser();    //取当前用户标识
            _this.searchSource.airport=JSON.parse(sessionStorage.getItem('airportData'));
            _this.searchSource.hangsi=JSON.parse(sessionStorage.getItem('department'));
            //---------------------------单击页面隐藏列表
            $('body').click(function (e) {
                var e = e || window.event; //浏览器兼容性
                const oselec = $('#selector');
                if(!oselec.is(e.target) && oselec.has(e.target).length === 0){
                    _this.scontroler.show = false;
                }
                const oinput = $('#searchKey');     //input
                if(!oinput.is(e.target) && oinput.has(e.target).length === 0){
                    _this.shistory.show = false;
                    _this.searchData.show = false;
                }
            })
            _this.getHistory();
            setTimeout(()=>{
                $('#nationSeaerch').css('display','block');
            },600)
        },
        watch: {
            // 改变keyword，这个函数就会运行
            keyword: function (newKeyword) {
                this.changeKeyword();
                this.flyList.show = false;
            },
            // 改变类别，则重置流程
            'scontroler.choose': function (newchoose) {
                $('#searchReset').click();
            },
        },
        destroyed(){
            $('#nested').css({
                'background-color': 'rgba(0,0,0,.75)',
                'position': 'absolute',
                'top': '0',
                'left': '0',
                'width': '100%',
                'height': '100%',
            });
            $('#set_clear').show();
//            this.sentToFather(true);
        }
    }
</script>

<style scoped>
    /*-------------------------------------------------------------------------通用样式*/
    .sicon{
        font-family: 'icon';
    }
    /*-------------------------------------------------------------------------容器样式*/
    *{
        margin: 0;
        padding: 0;
    }
    #nationSeaerch{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 12px;
        color: #333;
    }
    .s-panel{
        position: absolute;
        top: 0;
        left: 0;
        width: 380px;
        height: 50px;
        background-color: #fff;
    }
    /*-------------------------------------------------------------------------模拟select*/
    #selector{
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-indent: 10px;
        cursor: pointer;
        font-size: 12px;
    }
    #selector:after{
        content: "\E88F";
        font-family: icon;
        font-size: 12px;
        transform: rotateX(45deg);
        position: absolute;
        right: 0;
        color: rgb(68,85,161);
    }
    .sdropList{
        position: absolute;
        height: auto;
        line-height: 40px;
        text-indent: 12px;
        background-color: #fff;
        border: 1px solid #8f96a6;
        z-index: 2;
    }
    .sdropList li{
        height: 40px;
        cursor: pointer;
    }
    .sdropList li:hover{
        background-color: #ebebeb;
    }
    .sselect{
        top: 50px;
        left: 0;
        width: 56px;
    }

    /*-------------------------------------------------------------------------文本框*/
    #searchKey{
        display: inline-block;
        position: absolute;
        top: 0;
        width: 225px;
        height: 40px;
        margin: 5px 0 5px 5px;
        padding: 0;
        border: none;
        outline: none;
        text-indent: 10px;
        border-left: 1px solid #8f96a6;

    }
    .searchKeyBorder{
        border-right: 1px solid #8f96a6 !important;
    }
    .wordsClear{
        position: absolute;
        display: inline-block;
        width: 50px;
        height: 50px;
        right: 50px;
        font-size: 22px;
        line-height: 50px;
        color: #8f96a6;
        text-align: center;
        cursor: pointer;
        padding: 0;
    }
    .wordsClear:after{
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        transition: height 0.1s;
        background-color: #D56044;
    }
    .wordsClear:hover:after{
        content: "清空";
        font-size: 13px;
        height: 100%;
        color: #fff;
    }
    .wordsClear:hover:active{
        background-color: #D56044;
    }
    .searchIcon{
        display: inline-block;
        position: absolute;
        right: 0;
        width: 50px;
        height: 50px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
        background-color: #4455a1;
        cursor: pointer;
        border:none;
    }
    .searchIcon:hover{
        background-color: #6E81D4;
    }
    .searchIcon:active{
        background-color: #8D9EE6;
    }

    /*-------------------------------------------------------------------------下拉列表*/
    #sdrop{
        position: absolute;
        top: 50px;
        left: 55px;
        width: 325px;
        background-color: #fff;
    }
    #sdrop ul{
        max-height: 400px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #sdrop .sresult{
        position: relative;
    }
    #sdrop p.clearFavorite {
        position: relative;
        bottom: 0;
        height: 39px;
        text-align: right;
        margin: 0;
        padding-right: 17px;
        border-top: 1px solid #ccc;
    }
    #sdrop p.clearFavorite span{
        cursor: pointer;
    }
    #sdrop .sresult-l{
        display: inline-block;
        float: left;
    }
    #sdrop .sresult-r{
        display: inline-block;
        margin-right: 20px;
        float: right;
    }
    .hisIcon{
        display: inline-block;
        color: #797979;
        font-size: 10px;
        margin-right: 17px;
    }
    #result-box{
        position: absolute;
        top: 50px;
        left: 0;
        width: 380px;
        margin-top: 3px;
        background-color: #fff;
    }
    #result-box .result-box-head{
        position: relative;
        width: 100%;
        height: 80px;
        color: #fff;
        line-height: 80px;
        background-color: #4455a1;
    }
    #result-box .result-box-head p{
        font-size: 15px;
        text-indent: 18px;
    }
    #result-box .result-box-head #showFlyList{
        display: inline-block;
        position: absolute;
        width: 112px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        top: 26px;
        right: 10px;
        text-indent: 0;
        font-size: 12px;
        letter-spacing: 1px;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 5px;
        cursor: pointer;
    }
    #result-box .result-box-head .small{
        font-size: 6px;
    }


    #result-box .resule-fly{
        margin-top: 3px;
        color: #000;
        overflow-x: hidden;
        overflow-y: auto;
        margin-bottom: 20px;
        max-height: 520px;
    }
    @media screen and (max-height: 800px){
        #result-box .resule-fly{
            max-height: 320px;
        }
    }
    #result-box .resule-fly table{
        position: relative;
        width: 100%;
        text-align: center;
    }
    #result-box .resule-fly table thead td{
        color: #797979;
        border-bottom: 1px solid #d0d0d0;
    }
    #result-box .resule-fly table tr{
        height: 40px;
    }
    #result-box .resule-fly tbody>tr:hover{
        background-color: #ebebeb;
    }
    #result-box .resule-fly table>td{
        border: none;
    }
    #result-box .result-box-foot{
        position: relative;
        width: 100%;
        height: 50px;
        border-top: 1px solid #ebebeb;
    }
    #result-box #table-outer{
        display: inline-block;
        position: absolute;
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        background-color: #4455a1;
        top: 10px;
        right: 17px;
        cursor: pointer;
    }
    .fadvanced-filter-turn{
        position: absolute;
        right: 40%;
        cursor: pointer;
        font-size: 16px;
        color: #53b77b;
    }
    .fadvanced-filter-turn:hover{
        color: #fff;
    }

</style>
